<template>
  <div>
    <table>
      <thead>
        <tr>
          <td>
            <label>
              <!-- checked: 用于设定勾选状态 -->
              <input @change="checkAll" type="checkbox" :checked="isCheckAll" />
              全选
            </label>
          </td>
          <td></td>
          <td>商品名</td>
          <td>单价</td>
          <td>数量</td>
          <td>小计</td>
          <td>中国运费</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <input @change="checkAll" type="checkbox" :checked="isCheckAll" />
          </td>
          <td><img style="width: 20px" src="/taobao.jpg" alt="" /> 奥迪双钻</td>
        </tr>
        <tr v-for="(product, i) in products" :key="i">
          <td class="che">
            <input type="checkbox" v-model="product.checked" />
          </td>
          <td>
            <img width="80px" :src="product.cover" alt="" />
          </td>
          <td>
            <div>
              {{ product.name }}
            </div>
            <div class="ellipsis">{{ product.type }}</div>
          </td>
          <td style="font-weight: bold">¥{{ product.price.toFixed(2) }}</td>
          <td id="btn">
            <div
              @click="product.count--"
              :class="{ disabled: product.count == 1 }"
            >
              -
            </div>
            <span>{{ product.count }}</span>
            <div @click="product.count++">+</div>
          </td>
          <td style="font-weight: bold; color: #ff6e6e">
            ¥{{ (product.price * product.count).toFixed(2) }}
          </td>
          <td>¥0.00</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </tfoot>
    </table>
    <div class="shadow">
      <div>
        <div>商品总计: ¥</div>
        <div>运费总计: ¥</div>
      </div>
      <div>
        <span>应付金额:</span><span>¥{{ getTotal.toFixed(2) }}</span>
      </div>
      <div>结算</div>
    </div>
  </div>
</template>

<script>
export default {
  // 事件触发的方法: methods
  methods: {
    // 如果事件在调用时,没写(), 则默认的参数1 是事件参数
    checkAll(e) {
      console.log(e.target.checked); //查看 checked 属性
      // 读取全选框的值, 赋值给每个商品的checked属性
      this.products.forEach((product) => (product.checked = e.target.checked));
    },
  },

  computed: {
    //判断是否全选: 每一个的checked都是true
    isCheckAll() {
      return this.products.every((product) => product.checked);
    },
    getTotal() {
      // reduce: 让数组元素合并出一个值
      var a = this.products.reduce((sum, product) => {
        const { price, count, checked } = product;
        // *true 相当于 *1
        // *false 相当于 *0 = 0
        // 没有勾选, 就是 sum + 0, 即不累加
        return sum + price * count * checked;
      }, 0);

      return a;
    },
  },

  data() {
    return {
      num: 1,
      products: [
        {
          name: "mk50钢铁侠手办621玩具漫威复仇者联盟3人偶4男生模型摆件7马克85",
          price: 239.0,
          count: 1,
          checked: true,
          type: "大小:【正版包邮】, 颜色分类:【豪华版】",
          store: "奥迪双钻",
          cover: "/demo.jpg",
          storeCover: "/taobao.jpg",
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
tfoot {
  height: 20px;
}
table {
  margin: 0 auto;
  user-select: none;
  border: 1px solid black;
  background-color: #fff;

  thead {
    background-color: #f5f5f5;
    border-bottom: 1px solid black;
    font-size: 14px;

    > tr {
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;

      > td:nth-child(4),
      > td:nth-child(5),
      > td:nth-child(6),
      > td:nth-child(7) {
        text-align: center;
      }
      > td:first-child {
        width: 50px;
        font-size: 12px;
      }
      > td {
        margin: 10px;
        width: 100px;
      }

      > td:nth-child(3) {
        height: 100%;
        line-height: 40px;
        width: 230px;
      }
    }
  }
  tbody {
    background-color: #fff;

    > tr:first-child {
      display: flex;
      height: 40px;
      align-items: center;
      width: 220px;

      > td:first-child {
        width: 50px;
      }

      > td {
        width: 100px;
        margin: 10px;
      }
      > td:last-child {
        display: flex;
        justify-content: space-between;
      }
    }

    > tr:not(:first-child) {
      height: 80px;
      display: flex;
      justify-content: center;
      align-items: center;

      > td:first-child {
        width: 50px;
      }

      > td:nth-child(4),
      > td:nth-child(5),
      > td:nth-child(6),
      > td:nth-child(7) {
        text-align: center;
      }

      > td {
        margin: 10px;
        width: 100px;
      }

      > td:nth-child(3) {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        width: 230px;
        font-size: 14px;

        > div:last-child {
          font-size: 12px;
          color: #999999;
        }
      }
    }
  }
}
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#btn {
  display: flex;
  align-items: center;
  > div {
    border: 1px solid black;
    width: 25px;
    height: 25px;
    box-sizing: border-box;
    text-align: center;
    cursor: pointer;

    &.disabled {
      opacity: 0.8;
      background-color: #e7e7e7;
      pointer-events: none;
    }
  }
  > span {
    width: 50px;
    height: 25px;
    text-align: center;
    border: 1px solid black;
    box-sizing: border-box;
    border-left: none;
    border-right: none;
  }
}

.shadow {
  margin: 25px 0;
  display: flex;
  height: 40px;
  justify-content: flex-end;
  align-items: center;

  > div:first-child {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
    font-size: 12px;
    color: #666666;
    border-right: 1px solid #666;
    padding: 5px 20px 5px 0px;
    box-sizing: border-box;
  }

  > div:nth-child(2) {
    padding: 0 10px;
    text-align: center;
    height: 100%;
    display: flex;
    align-items: center;

    > span:first-child {
      font-size: 14px;
      font-weight: bold;
    }
    > span:last-child {
      font-size: 20px;
      font-weight: bold;
      color: #ff6e6e;
      margin-left: 10px;
    }
  }

  > div:last-child {
    margin-left: 15px;
    color: #fff;
    background-color: #ff6e6e;
    width: 120px;
    height: 100%;
    line-height: 40px;
    font-weight: bold;
    border-radius: 30px;
    text-align: center;
  }
}
</style>
